<template>
	<view class="flex stepper">
		<view class="stepper_box border_r" @click="changeNum('reduce')">
			<image src="/static/jian.png" mode="aspectFill" class="stepper_icon" :class="num<=1?'opt':''" />
		</view>
		<view class="stepper_num_box">{{ num }}</view>
		<view class="stepper_box border_l" @click="changeNum('add')">
			<image src="/static/jia.png" mode="aspectFill" class="stepper_icon" />
		</view>
	</view>
</template>

<script>
	export default {
		name:"stepper",
		props: {
			num: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				stepperNum: 1,
			};
		},
		methods: {
			changeNum(n) {
				this.$emit('changeNum',n)
				// if(n == 'add') {
				// 	this.num ++;
				// }else {
				// 	if(this.num == 1) {
				// 		uni.showToast({
				// 			title: '最少核销一个~',
				// 			icon: 'none'
				// 		});
				// 		return false;
				// 	}else {
				// 		this.num --;
				// 	}
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
.stepper {
	border-radius: 7rpx;
	border: 1rpx solid #E6E6E6;
	&_box {
		width: 47rpx;
		height: 47rpx;
		text-align: center;
		align-items: center;
		
	}
	.border_r {
		border-right: 1rpx solid #E6E6E6;
	}
	.border_l {
		border-left: 1rpx solid #E6E6E6;
	}
	&_icon {
		width: 27rpx;
		height: 27rpx;
		margin: 10rpx;
	}
	&_num_box {
		line-height: 47rpx;
		min-width: 65rpx;
		text-align: center;
	}
	.opt {
		opacity: 0.2;
	}
}
</style>